<template>
    <div>
        <a-modal
            v-model:visible="visible"
            title="关键指标趋势分析"
            width="100%"
            wrapClassName="full-modal-trendAnalysis"
            :footer="null"
            @cancel="visible = false"
        >
            <div style="display: flex;">
                <div>
                    <div
                        class="fxmmc-box"
                        :class="selectFxmmc==item.fxmmc?'select-fxmmc':''" 
                        v-for="(item,index) in trendAnalysisList" 
                        :key="index"
                        @click="selectFxmmcClick(item)"
                    >
                        {{ item.fxmmc }}
                    </div>
                </div>
                <div style="flex: 1;">
                    <div style="height: calc(100vh - 180px);width: 100%;" :key="containerKey">
                        <div class="trendAnalysis-ringDiagram-comp" :id="containerId"></div>
                    </div>
                </div>
            </div>
            
        </a-modal>
    </div>
</template>
<script>
import {
    spcyQyInfoqueryGjzbListByJyxx,
    spcyQyInfoqueryGjzbYjByJyxx,
} from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            visible:false,
            formState:{},
            trendAnalysisList:[],
            selectFxmmc:'',
            containerKey:null,
            containerId:'c'+ new Date().getTime(),
            XList:[],
            YList:[],
            actionValue:0,
            warningValue:0,
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            //console.log(val)
            this.formState = val
            spcyQyInfoqueryGjzbListByJyxx({fjyid:val.fjyid}).then(res=>{
                if(res.code == 200){
                    //console.log(res)
                    this.getGraphData(res.result[0])
                    this.selectFxmmc = res.result[0].fxmmc
                    this.trendAnalysisList = res.result
                    this.actionValue = res.result[0].fhdx.replace("%", "")
                    this.warningValue = res.result[0].fjjx.replace("%", "")
                     
 
                }else{
                    
                }
            })
        },
        getGraphData(val){
            //console.log(val)
            let data = []
            this.XList = []
            this.YList = []
            this.actionValue = val.fhdx.replace("%", "")
            this.warningValue = val.fjjx.replace("%", "")
            spcyQyInfoqueryGjzbYjByJyxx({fjyid:this.formState.fjyid,fxmmc:val.fxmmc}).then(res=>{
                if(res.code == 200){
                    res.result.forEach((item,index) => {
                        let arr = data.filter(i=>{i == item.fbgrq})
                        if(!arr.length){
                            data.push(item.fbgrq)
                            this.XList.push(item.fbgrq)
                            this.YList.push(item.fjysj.replace("%", ""))
                        }
                    });
                    this.getPieChart(this.XList,this.YList)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        selectFxmmcClick(val){
            this.containerId = 'c'+ new Date().getTime()
            this.containerKey = Date.now()
            this.selectFxmmc = val.fxmmc
            this.getGraphData(val)
            
        },
        getPieChart(x,y){
            var chartDom = document.getElementById(this.containerId);
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                color:['#5470c6','#ee6666','#fac858'],
                title: {
                    left: 'center',
                    text: this.selectFxmmc+'指标',
                },
                legend: {
                    data:['指标数','超标线','警戒线'],
                    // data:['菌落数'],
                    show: true,
                    orient: "vertical",
                    align: "left",
                    right:0,
                    textStyle: {
                        fontWeight: "bolder",
                        fontSize: 14
                    },
                    borderColor: "#000",
                    borderWidth: 1
                },
                xAxis: {
                    type: 'category',
                    data: x,
                    name: "时间",
                    nameLocation: "start",
                    nameTextStyle:{
                        verticalAlign: "top",
                        height: 40,
                        lineHeight: 40,
                        fontSize: 20,
                        fontWeight: "bold",
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}%'
                    },
                    name: "指\n标\n值",
                    nameRotate: 1,
                    // nameLocation: "middle",
                    nameLocation: "middle",
                    nameGap: 40,
                    nameTextStyle:{
                        fontSize: 20,
                        fontWeight: "bold",
                    }
                },
                series: [{
                    name: '指标数',
                    data: y,
                    type: 'line',
                    smooth: false,
                    label: {
                        show: true,
                        fontWeight: "bold",
                        fontSize: 14,
                        // color:'#fff',
                        // backgroundColor: '#5ca3e5',
                    },
                    markLine: {
                        data: [{
                            yAxis:this.actionValue,
                            label:{
                                padding: [0, 0, 0, 0],
                                position: "end",
                                formatter:'超标线： {per|{c}}  ',
                                // formatter:(e)=>{
                                //     return "行动值："+e.value
                                // },
                                fontWeight:600,
                                fontSize: 14,
                                rich: {
                                    per: {
                                        color: '#ee6666',
                                        fontSize: 16 ,
                                    }
                                }
                                
                            },
                            lineStyle: {//警戒线的样式，颜色，宽度，类型
                                color: '#ee6666',
                                type: 'dashed',//还有实线，
                                width: 1
                            },
                        },{
                            yAxis:this.warningValue,
                            label:{
                                padding: [0, 0, 0, 0],
                                position: "end",
                                formatter:'警戒线： {per|{c}}  ',
                                fontWeight:600,
                                fontSize: 14 ,
                                rich: {
                                    per: {
                                        color: '#fac858',
                                        fontSize: 16 ,
                                    }
                                }
                            },
                            lineStyle: {//警戒线的样式，颜色，宽度，类型
                                color: '#fac858',
                                type: 'dashed',//还有实线，
                                width: 1
                            },
                        }],
                        
                        silent: true
                    }
                },{
                    name: '超标线',
                    type: 'line',
                    // stack: 'Total',
                    data: [],
                    type: 'line',
                    label: {
                        show: true,
                        fontWeight: "bold",
                        fontSize: 14,
                        // color:'#fff',
                        // backgroundColor: '#5ca3e5',
                    },
                },{
                    name: '警戒线',
                    type: 'line',
                    // stack: 'Total',
                    data: [],
                    type: 'line',
                    label: {
                        show: true,
                        fontWeight: "bold",
                        fontSize: 14,
                        // color:'#fff',
                        // backgroundColor: '#5ca3e5',
                    },
                }]
            };

            option && myChart.setOption(option);
        }
    }
}
</script>
<style lang="less">
.full-modal-trendAnalysis{
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }

  .fxmmc-box{
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    padding: 5px 10px;
    margin-bottom: 5px;
    background: #f5f5f5;
    cursor: pointer;
  }
  .select-fxmmc{
    background-color: #5ca3e5;
    color: #fff;
  }
  .trendAnalysis-ringDiagram-comp{
        width: 100%;
        height: calc(100vh - 180px);
    }
}
</style>